<template>
	<view class="wrap u-skeleton">
		<view class="u-p-b-20"></view>
		<view class="m-bg-main u-p-30 u-skeleton-rect">
			<u-form :model="form">
				<u-field class="u-m-b-20" v-model="form.name" label="收 货 人" required placeholder="请填写收货人"></u-field>
				<u-field class="u-m-b-20" maxlength="11" v-model="form.phone" label="联系手机" required placeholder="请填写联系手机"></u-field>

				<view @click="showSelect = true">
					<u-field class="u-m-b-20" v-model="form.citys" label="所在地区" required placeholder="请选择所在地区" :disabled="true" :clearable="false">
						<u-icon slot="right" color="gray" size="20" name="arrow-down-fill"></u-icon>
					</u-field>
				</view>

				<u-field :border-bottom="false" v-model="form.address" label="收货地址" required placeholder="请填写收货地址"></u-field>
			</u-form>
		</view>

		<m-select-city v-model="showSelect" :city-value="form.citys" @city-change="cityChange"></m-select-city>

		<view class="m-bg-main u-m-t-20 u-p-40 u-skeleton-rect">
			<view class="u-flex">
				<view class="u-flex-7">
					<view style="font-size:30rpx;">设置默认地址</view>
					<view class="u-m-t-20 u-tips-color">提醒：每次下单会默认推荐该地址</view>
				</view>
				<view class="u-field-5"><u-switch :active-color="$u.color['error']" v-model="checked" @change="setDefault"></u-switch></view>
			</view>
		</view>

		<view class="m-layout-bottom" v-if="!loading">
			<u-button type="error" style="width:60%;" class="m-inline-block" shape="circle" @click="saveAddress">保存收货地址</u-button>
		</view>

		<u-skeleton :loading="loading" :animation="true" elColor="#FFF" bgColor="#EEE"></u-skeleton>

		<m-login ref="login"></m-login>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				type: 0,
				name: '',
				phone: '',
				citys: '',
				address: ''
			},
			addr: '',
			order: '',
			citys: {},
			loading: true,
			checked: false,
			showSelect: false
		};
	},
	onLoad(opt) {
		this.addr = opt.addr || '';
		this.order = opt.order || '';
	},
	mounted() {
		this.$refs.login.local().then(user => {
			this.load();
			setTimeout(() => (this.loading = false), 200);
		});
	},
	methods: {
		load() {
			if (!this.addr) return;
			this.$u.post('data/api.auth.address/get', { code: this.addr }).then(ret => {
				if (ret.code < 1 || ret.data.list.length < 1) {
					this.$u.message.alert('收货地址不存在').then(() => {
						this.$u.goto.addressHome(this.order);
					});
				} else {
					let site = ret.data.list[0];
					this.checked = !!site.type;
					this.citys.area = site.area;
					this.citys.city = site.city;
					this.citys.province = site.province;
					// 表单数据赋值
					this.form.type = site.type;
					this.form.name = site.name;
					this.form.phone = site.phone;
					this.form.address = site.address;
					this.form.citys = [site.province, site.city, site.area].join(' ');
				}
			});
		},
		//  设置默认地址
		setDefault(state) {
			this.form.type = Number(state);
		},
		// 保存收货地址
		saveAddress() {
			var that = this;
			let data = {
				code: this.addr || '',
				type: this.form.type,
				name: this.form.name,
				phone: this.form.phone,
				province: this.citys.province,
				city: this.citys.city,
				area: this.citys.area,
				address: this.form.address
			};
			this.$u.api.post('data/api.auth.address/set', data).then(ret => {
				if (this.order) {
					this.$u.page.rec('pages/order/xpay', {
						addr: this.addr,
						order: this.order
					});
				} else {
					this.$u.page.rec('pages/address/index');
				}
			});
		},
		// 地址区域变更
		cityChange(e) {
			this.citys.area = e.area;
			this.citys.city = e.city;
			this.citys.province = e.province;
			this.form.citys = e.province + ' ' + e.city + ' ' + e.area;
		}
	}
};
</script>

<style lang="scss">
.m-layout-bottom {
	width: 100%;
	bottom: 40rpx;
	position: fixed;
	text-align: center;
}
</style>
